<div class="modal-content settings-modal">
    <w-responsive-menu active-menu="$ctrl.tab">
        <w-responsive-menu-item value="general">
            <div class="menu-item general icon-settings-general">
                <i></i>
                <span w-i18n="modal.settings.general.title" class="icon"></span>
            </div>
        </w-responsive-menu-item>
        <w-responsive-menu-item value="security">
            <div class="menu-item security icon-settings-security">
                <i></i>
                <span w-i18n="modal.settings.security.title"></span>
            </div>
        </w-responsive-menu-item>
        <w-responsive-menu-item value="network">
            <div class="menu-item network icon-settings-network">
                <i></i>
                <span w-i18n="modal.settings.network.title" class="icon"></span>
            </div>
        </w-responsive-menu-item>
        <w-responsive-menu-item value="info">
            <div class="menu-item info icon-settings-info">
                <i></i>
                <span w-i18n="modal.settings.info.title" class="icon"></span>
            </div>
        </w-responsive-menu-item>
    </w-responsive-menu>

    <div class="settings-content">
        <w-step-by-step active-step="$ctrl.tab">
            <w-step step-id="general" class="general">

                <w-web-only>
                    <div class="row flex-row row-style unit-checkbox no-border">
                        <w-checkbox-submit id="openLinkViaWeb" ng-model="$ctrl.openLinkViaWeb"></w-checkbox-submit>
                        <label for="openLinkViaWeb" w-i18n="modal.settings.general.openLinkViaWeb"></label>
                    </div>
                </w-web-only>

                <div class="row flex-row row-style unit-checkbox no-border">
                    <w-checkbox-submit id="advancedMode" ng-model="$ctrl.advancedMode"></w-checkbox-submit>
                    <label for="advancedMode" w-i18n="modal.termsAccept.body.advancedMode"></label>
                </div>

                <div class="row flex-row row-style unit-select">
                    <div class="footnote-1 basic-500" w-i18n="modal.settings.general.language"></div>
                    <w-change-language on-change="$ctrl.onChangeLanguage(language)"></w-change-language>
                </div>

                <div class="row flex-row row-style unit-select">
                    <div class="footnote-1 basic-500" w-i18n="modal.settings.general.timeout"></div>
                    <div class="select-setting-wrap">
                        <w-select class="small with-scroll select__no-user-select" ng-model="$ctrl.logoutAfterMin">
                            <w-option value="::5">
                                <span w-i18n="modal.settings.general.minutes" w-i18n-ns="app.utils"
                                      params="{minutes: 5}"></span>
                            </w-option>
                            <w-option value="::10">
                                <span w-i18n="modal.settings.general.minutes" w-i18n-ns="app.utils"
                                      params="{minutes: 10}"></span>
                            </w-option>
                            <w-option value="::20">
                                <span w-i18n="modal.settings.general.minutes" w-i18n-ns="app.utils"
                                      params="{minutes: 20}"></span>
                            </w-option>
                            <w-option value="::40">
                                <span w-i18n="modal.settings.general.minutes" w-i18n-ns="app.utils"
                                      params="{minutes: 40}"></span>
                            </w-option>
                            <w-option value="::60">
                                <span w-i18n="modal.settings.general.hours" w-i18n-ns="app.utils"
                                      params="{hours: 1}"></span>
                            </w-option>
                        </w-select>
                    </div>
                </div>

                <div class="row flex-row row-style unit-select">
                    <div class="footnote-1 basic-500" w-i18n="modal.settings.general.theme"></div>
                    <div class="select-setting-wrap">
                        <w-select class="small select__no-user-select" ng-model="$ctrl.theme">
                            <w-option value="::'default'">
                                <i class="white-dot"></i>
                                <span w-i18n-ns="app.utils" w-i18n="modal.settings.general.white"></span>
                            </w-option>
                            <w-option value="::'black'">
                                <i class="dark-dot"></i>
                                <span w-i18n-ns="app.utils" w-i18n="modal.settings.general.dark"></span>
                            </w-option>
                            <!--w-option value="::'auto'"><i class="auto-dot"></i><span w-i18n="modal.settings.general.auto"></span></w-option-->
                        </w-select>
                    </div>
                </div>

                <w-permit name="CAN_PAIRING_WITH_MOBILE" mode="on">
                    <div class="row flex-row row-style unit-selectgit stat">
                        <div class="footnote-1 basic-500" w-i18n="modal.settings.pairing.devicePairing"></div>
                        <div>
                            <a class="label link"
                               w-i18n="modal.settings.pairing.showCodeLink"
                               w-modal-close
                               w-analytics event="'Settings Pairing Code Click'"
                               event-target="'ui'"
                               ng-click="$ctrl.showPairingWithMobile()"></a>
                        </div>
                    </div>
                </w-permit>

                <div class="row flex-row row-style solid-border">
                    <div class="footnote-1 basic-500" w-i18n="modal.settings.general.blockHeight"></div>
                    <div><span class="label">{{$ctrl.blockHeight}}</span></div>
                </div>
            </w-step>

            <w-step step-id="security" class="security">
                <div class="row margin-1" ng-if="$ctrl.phrase">
                    <div class="footnote-1 basic-500 label">
                        <span w-i18n="modal.settings.security.backupPhrase"></span>
                        <a class="settings-copy" w-copy="::$ctrl.phrase" w-i18n="modal.settings.network.copy"></a>
                    </div>
                    <div class="data-field">
                        <w-button ng-if="!$ctrl.shownSeed" class="tiny" on-click="$ctrl.shownSeed = true">
                            <span w-i18n="modal.settings.security.show"></span>
                        </w-button>
                        <pre class="footnote-1 pre" ng-if="$ctrl.shownSeed">{{::$ctrl.phrase}}</pre>
                    </div>
                </div>

                <div class="row margin-1" ng-if="$ctrl.privateKey">
                    <div class="footnote-1 basic-500 label">
                        <span w-i18n="modal.settings.security.privateKey"></span>
                        <a class="settings-copy"
                           w-copy="::$ctrl.privateKey"
                           w-i18n="modal.settings.network.copy"></a>
                    </div>
                    <div class="data-field">
                        <w-button ng-if="!$ctrl.shownKey" class="tiny" on-click="$ctrl.shownKey = true">
                            <span w-i18n="modal.settings.security.show"></span>
                        </w-button>
                        <div class="mobile-low-fsize" ng-if="$ctrl.shownKey">{{::$ctrl.privateKey}}</div>
                    </div>
                </div>
                <div class="row flex-row row-style row-mobile">
                    <div class="footnote basic-500" w-i18n="modal.settings.security.publicKey"></div>
                    <div class="mobile-low-fsize">{{::$ctrl.publicKey}}</div>
                </div>

                <div class="row flex-row row-style row-mobile" ng-class="{'solid-border': !$ctrl.advancedMode}">
                    <div class="footnote basic-500" w-i18n="modal.settings.security.address"></div>
                    <div class="mobile-low-fsize">{{::$ctrl.address}}</div>
                </div>

                <div ng-if="$ctrl.advancedMode" class="row flex-row row-style solid-border text-right">
                    <div class="footnote basic-500" w-i18n="modal.settings.security.script"></div>
                    <div>
                        <w-button on-click="$ctrl.showScriptModal()" class="tiny submit" w-modal-close>
                            <span ng-if="$ctrl.isScript" w-i18n="modal.settings.security.scriptButtonUpdate"></span>
                            <span ng-if="!$ctrl.isScript" w-i18n="modal.settings.security.scriptButton"></span>
                        </w-button>
                    </div>
                </div>

            </w-step>

            <w-step step-id="network" class="network">
                <div class="row margin-1">
                    <div class="footnote-1 basic-500 label">
                        <span w-i18n="modal.settings.network.nodeAddress"></span>
                        <a class="settings-copy" w-copy="$ctrl.node" w-i18n="modal.settings.network.copy"></a>
                    </div>
                    <div class="data-field">
                        <w-input ng-model="$ctrl.node"></w-input>
                    </div>
                </div>

                <div class="row margin-1">
                    <div class="footnote-1 basic-500 label">
                        <span w-i18n="modal.settings.network.matcherAddress"></span>
                        <a class="settings-copy" w-copy="$ctrl.matcher" w-i18n="modal.settings.network.copy"></a>
                    </div>
                    <div class="data-field">
                        <w-input ng-model="$ctrl.matcher"></w-input>
                    </div>
                </div>

                <div class="row margin-1 asset-verification">
                    <div class="footnote-1 basic-500 label">
                        <span w-i18n="modal.settings.network.dataProvider"></span>
                        <a class="settings-copy"
                           w-copy="$ctrl.assetsOracleTmp"
                           w-i18n="modal.settings.network.copy"></a>
                    </div>
                    <div class="data-field has-helper">

                        <w-help-icon class="info" ng-if="!$ctrl.oracleError && $ctrl.oracleWavesData">
                            <div class="flex">
                                <div>
                                    <div class="data-provider-name basic-700">
                                        {{$ctrl.oracleWavesData.name}}
                                    </div>
                                    <div class="data-provider-id basic-500">
                                        {{$ctrl.oracleWaves}}
                                    </div>
                                </div>
                            </div>
                            <div class="data-provider-info help-icon__row">
                                            <span>
                                                {{$ctrl.oracleWavesData.description.en}}
                                            </span>
                            </div>
                            <div class="help-icon__row">
                                <a target="_blank" rel="noopener noreferrer" href="{{$ctrl.oracleWavesData.link}}"
                                   w-i18n="modal.settings.network.showMore"></a>
                            </div>
                        </w-help-icon>

                        <form novalidate name="dataProvider">
                            <w-input-container class="relative">
                                <w-input name="dataProviderInput"
                                         w-validate
                                         w-validator-custom="{{!$ctrl.oracleError}}"
                                         ng-model="$ctrl.assetsOracleTmp"></w-input>
                                <div class="input-state"
                                     ng-class="{pending: $ctrl.oraclePending, success: $ctrl.oracleSuccess}">
                                    <div class="input-state__icon">
                                        <svg class="animate" width="10px" height="10px" viewBox="0 0 10 10"
                                             version="1.1" xmlns="http://www.w3.org/2000/svg"
                                             xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <g id="Icon/10/check-submit300" stroke="none" stroke-width="1" fill="none"
                                               fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
                                                <polyline id="Path" stroke="#1F5AF6" stroke-width="1.5"
                                                          points="2.38 5.16363636 4.01636364 6.8 7.61636364 3.2"></polyline>
                                            </g>
                                        </svg>
                                    </div>
                                </div>
                                <w-input-error message="custom">
                                    <span w-i18n="modal.settings.network.dataProviderInvalid"></span>
                                </w-input-error>
                            </w-input-container>
                        </form>
                    </div>
                </div>

                <div class="row margin-1 asset-api">
                    <div class="footnote-1 basic-500 label">
                        <span w-i18n="modal.settings.network.apiAddress"></span>
                        <a class="settings-copy" w-copy="$ctrl.api" w-i18n="modal.settings.network.copy"></a>
                    </div>
                    <div class="data-field has-helper">
                        <w-input ng-model="$ctrl.api"></w-input>
                        <w-help-icon>
                            <div class="help-icon__row headline-3" w-i18n="modal.settings.network.apiAddressHelp"></div>
                        </w-help-icon>
                    </div>
                </div>

                <div class="row margin-1 asset-filter">
                    <div class="footnote-1 basic-500 label">
                        <span w-i18n="modal.settings.network.assetNameFilter"></span>
                        <a class="settings-copy" w-copy="$ctrl.tokensNameListUrl" w-i18n="modal.settings.network.copy"></a>
                    </div>

                    <div class="data-field has-helper">
                        <w-input ng-model="$ctrl.tokensNameListUrl"></w-input>
                        <w-help-icon class="info">
                            <div class="help-icon__row headline-3" w-i18n="modal.settings.network.assetNameFilterHelp"></div>
                        </w-help-icon>
                    </div>
                </div>

                <div class="row margin-1 asset-name-filter">
                    <div class="footnote-1 basic-500 label">
                        <span w-i18n="modal.settings.network.spamFilter"></span>
                        <a class="settings-copy" w-copy="$ctrl.scamListUrl" w-i18n="modal.settings.network.copy"></a>
                    </div>

                    <div class="data-field has-helper">
                        <w-input ng-model="$ctrl.scamListUrl"></w-input>
                        <w-help-icon class="info">
                            <div class="help-icon__row headline-3" w-i18n="modal.settings.network.spamListHelp"></div>
                        </w-help-icon>
                    </div>
                </div>

                <div class="margin-3 margin-top-2">
                    <div class="row flex-row row-style unit-checkbox">
                        <w-checkbox-submit id="spamFilterToggle" ng-model="$ctrl.dontShowSpam"></w-checkbox-submit>
                        <label for="spamFilterToggle" w-i18n="modal.settings.network.dontShowSpamCheckboxDescr"></label>
                    </div>
                </div>

                <div class="margin-4">
                    <w-button class="interface bordered" on-click="$ctrl.setNetworkDefault()">
                        <span w-i18n="modal.settings.setDefault"></span>
                    </w-button>
                </div>
            </w-step>

            <w-step step-id="info" class="info">
                <div class="row flex-row row-style">
                    <div class="footnote-1 basic-500" w-i18n="modal.settings.info.version"></div>
                    <div>{{::$ctrl.appName}} {{::$ctrl.appVersion}}</div>
                </div>

                <div class="row flex-row row-style">
                    <div class="footnote-1 basic-500" w-i18n="modal.settings.info.support"></div>
                    <div><a href="{{::$ctrl.supportLink}}"
                            target="_blank"
                            rel="noopener noreferrer">{{::$ctrl.supportLinkName}}</a></div>
                </div>

                <div class="row flex-row row-style">
                    <div class="footnote-1 basic-500" w-i18n="modal.settings.info.legal"></div>
                    <div class="basic-500 text-right">
                        <a href="{{::$ctrl.termsAndConditionsLink}}"
                           target="_blank"
                           class="nowrap"
                           rel="noopener noreferrer">
                            <span w-i18n="modal.settings.info.termsAndConditions"></span>
                        </a>|
                        <a href="{{::$ctrl.privacyPolicy}}"
                           target="_blank"
                           class="nowrap"
                           rel="noopener noreferrer">
                            <span w-i18n="modal.settings.info.privacyPolicy"></span>
                        </a>
                    </div>
                </div>

                <div class="row flex-row row-style solid-border">
                    <div class="footnote-1 basic-500">&copy; 2019 Waves Platform</div>
                    <div><span class="waves-logo"></span></div>
                </div>
            </w-step>

        </w-step-by-step>
    </div>
</div>
